<template>
	<view class="wanl-list">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round" @tap="search()">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<view class="searchinfo cu-tag round" v-if="category">
						<text>类目:{{ category }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view class="searchinfo cu-tag round text-df" v-else-if="params.search">
						<text>{{ params.search }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view v-else>搜索</view>
				</view>
				<!-- <view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view> -->
			</view>
		</view>
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue">
			
				<view class="bar" style="background-color: #fff;">
					<view class="item " :class="{ text_linear: filterIndex === 0 }"
						@tap="tabClick(0,'热销产品')">热销产品</view>
					<view class="item " :class="{ text_linear: filterIndex === 1 }"
						@tap="tabClick(1,'新品速递')">新品速递</view>
					<view class="item " :class="{ text_linear: filterIndex === 2 }"
						@tap="tabClick(2,'精品优选')">精品优选</view>
					<!-- <view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
						</view>
					</view>
					<view class="item" @tap="showDrawer()">
						筛选
						<text class="wlIcon-shaixuan margin-left-xs "></text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 主体 -->

		<block v-if="goodsData.length > 0">
			<!-- {{goodsData}} -->
			<wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</block>
		
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sign_name:'',
				good_sign: '',
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-1-10', //列表样式
				goodsData: [], //商品列表数据
				showRight: false,
				category: '',
				goodsType: 'goods',
				empty: '没有找到任何宝贝',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad(option) {
			if (option.type) {
				this.goodsType = option.type;
			}
			if (option.search) {
				//如果搜索存在
				this.params.search = option.search;
				this.drawerParams.search = option.search;
			} else if (option.data) {
				var data = JSON.parse(option.data);
				this.drawerParams.category_id = data.category_id;
				this.category = data.category_name;
				this.params.filter.category_id = data.category_id;
				this.params.op.category_id = 'in';
			} else {
				console.log('调试模式');
			}
			// 加载位置，后续版本开启加载写入全局
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	geocode: true,
			// 	success: mres => {
			// 		uni.request({
			// 			url: 'https://restapi.amap.com/v3/geocode/regeo',
			// 			data: {
			// 				key: this.$wanlshop.config('amapkey'),
			// 				location: mres.longitude + ',' + mres.latitude
			// 			},
			// 			success: res => {
			// 				if (res.statusCode == 200) {
			// 					let address = res.data.regeocode.addressComponent;
			// 					this.drawerData.sameCity.name = address.province;
			// 				}
			// 			}
			// 		});
			// 	}
			// });
			
			// this.get_sign();
			this.loadData();
			if (this.goodsData.length == 0) {
				// this.loadlikeData();
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},
		methods: {
			async get_sign() {

				await uni.request({
					url: `/api/good/goodsign`,
					success: res => {
						console.log(res.data)
						this.good_sign = res.data
					}
				});


			},
			//异步加载商品列表
			async loadData() {
				// this.params.good_type_id = 'good';
				this.params.region_name = uni.getStorageSync("city_name");
				this.params.token = uni.getStorageSync("wanlshop:user").token;
				await uni.request({
					url: '/api/good/goodlist',
					data: this.params,
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';

						if (res.data.length < 10) {
							this.status = 'noMore'
						}
						if (res.data.length >= 10) {
							this.reload = true
							this.goodsData = res.data;
						}else{
							this.goodsData = this.goodsData.concat(res.data);
						}
						
						// this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
						console.log(this.goodsData)
						if (res.data.length == 0) {
							this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
						}
						// this.params.page = res.data.current_page; //当前页码
						// this.last_page = res.data.last_page; //总页码
					}
				});
			},

			//筛选点击
			tabClick(index,sign_name) {
				
				this.filterIndex = index;
				this.status = 'loading';
				this.params.page = 1;
				this.params.sign = sign_name;
				
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},

			search() {
				this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, 'fade-in', 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-20' : 'col-1-10';
			}
		}
	};
</script>

<style>
	.text_linear {
		font-weight: bolder;
		display: inline-block;
		height: 100%;
		/*color: #72D5EF;  颜色改不了*/
		font-size: .75rem;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #005A93 !important;
		padding: 0 .2rem;
		border-bottom: .1rem solid #005A93;
		/* background:rgba(239,249,255,0.4); */
	}

	.cu-custom .search-form {
		border: 3rpx solid #fe6600;
		background-color: #fff;
	}

	.cu-tag:not([class*="bg"]):not([class*="line"]) {
		background-color: #f7f7f7;
	}
</style>